<div class="col-12 col-md-5 col-lg-4 col-xl-3" th:fragment="userinfo(user)" xmlns:th="http://www.w3.org/1999/xhtml" style="float: left">
    <link type="text/css" href="../static/layui/css/layui.css"/>
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script type="text/javascript" src="/layui/layui.all.js"></script>

    <!-- user -->
    <div class="user">
        <div class="user__head" style="background-color: rgb(55, 145, 229)">
            <div class="user__img">
                <img  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F30%2F90%2F40%2F309040a0602c672cebc6ab3a1bbbc8cd.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651292399&t=48fc4d6168ac9439a44e3629cb271efe" alt="用户头像">
            </div>
        </div>
        <div class="user__title">
            <h2><span style="vertical-align: inherit;"><span
                    style="vertical-align: inherit;">[[${user.nickname}]]</span></span></h2>
            <p><span
                    style="vertical-align: inherit;"><span
                    style="vertical-align: inherit;">[[${user.email}]]</span></span></p>
            <div class="profile__actions">
                <div class="post__location" >
                    <i class="icon ion-ios-navigate" style="color: #1ecd4a"></i>
                    <span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">[[${user.address}]]</span></span></span>
                </div>
            </div>
        </div>
        <ul class="user__list">
            <li><span><span style="vertical-align: inherit;"><span
                    style="vertical-align: inherit;">账号：</span></span></span> <span><span
                    style="vertical-align: inherit;"><span
                    style="vertical-align: inherit;">[[${user.account}]]</span></span></span></li>
            <li><span><span style="vertical-align: inherit;"><span
                    style="vertical-align: inherit;">年龄：</span></span></span> <span><span
                    style="vertical-align: inherit;"><span
                    style="vertical-align: inherit;">[[${user.age}]]</span></span></span></li>
            <li><span><span style="vertical-align: inherit;"><span
                    style="vertical-align: inherit;">性别：</span></span></span> <span><span
                    style="vertical-align: inherit;"><span
                    style="vertical-align: inherit;">[[${user.gender}]]</span></span></span></li>
        </ul>
        <ul class="user__stats">
            <li>
                <p><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">我的关注</span></span></p>
                <span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
                    <a th:if="${myfollowing}>0" href="/user/myfollowing">[[${myfollowing}]]</a>
                    <a th:if="${myfollowing}==0" onclick="layer.alert('您还没有关注任何人呢～',{icon: 6})">[[${myfollowing}]]</a>
                </span></span></span>
            </li>
            <li>
                <p><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">关注者</span></span></p>
                <span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">
                    <a th:if="${follower}>0" href="/user/follower">[[${follower}]]</a>
                    <a th:if="${follower}==0" onclick="layer.alert('还没有人关注你呢～',{icon: 6})">[[${follower}]]</a>
                </span></span></span>
            </li>
        </ul>
    </div>
    <!-- end user -->

    <!-- social -->
<!--    <div class="sidebox">-->
<!--        <div class="sidebox__share">-->
<!--            <span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">社交：</span></span></span>-->
<!--            <ul>-->
<!--                <li class="facebook"><a href="#"><i class="icon ion-logo-facebook"></i></a></li>-->
<!--                <li class="instagram"><a href="#"><i class="icon ion-logo-instagram"></i></a></li>-->
<!--                <li class="twitter"><a href="#"><i class="icon ion-logo-twitter"></i></a></li>-->
<!--                <li class="vk"><a href="#"><i class="icon ion-logo-vk"></i></a></li>-->
<!--            </ul>-->
<!--        </div>-->
<!--    </div>-->
    <!-- end social -->
</div>